<template>
  <div class="task-order">
    <table ref="tableDown" style="padding: 0 5px">
      <thead>
        <th width="170">下单时间</th>
        <th width="85">下单(虚数)</th>
        <th width="85">下单(实数)</th>
        <th
          width="100"
          v-if="(task_type == '_surebets_hand' || task_type == '_surebets_auto') && activetype == 'zuhe'"
        >
          实数总金额
        </th>
        <th width="80">盈亏(虚数)</th>
        <th width="80">盈亏(实数)</th>
        <th width="80">盈亏状态</th>
        <th
          width="80"
          v-if="(task_type == '_surebets_hand' || task_type == '_surebets_auto') && activetype == 'zuhe'"
        >
          利润率
        </th>
        <th width="80">交收状态</th>
        <th width="80">结算状态</th>
        <th width="150">平台单号</th>
        <th width="90">下单账号</th>
        <th v-if="task_type == '_copy_order_auto'" width="70">跟单账号</th>
        <th width="90">操作员</th>
        <th width="60">操作</th>
      </thead>
      <tbody v-if="list.length == 1 && list[0].order_list.length == 0">
        <tr>
          <td style="text-align: center; margin: 10px 0; color: #778090" colspan="15">暂无数据</td>
        </tr>
      </tbody>
      <tbody v-for="(item, index) in list" :key="index" style="position: relative">
        <div class="order_downindex" v-if="list.length > 1">{{ index + 1 }}</div>
        <tr
          v-for="(item2, index2) in item.order_list"
          :key="index2"
          :class="stylepadding(list, item, index, index2)"
          style="font-size: 12px"
        >
          <td>{{ item2.created_at }}</td>
          <td>
            <div style="font-weight: bold; float: right; margin-right: 25px">{{ item2.real_amount }}</div>
          </td>
          <td>
            <div style="font-weight: bold; float: right; margin-right: 25px">{{ item2.total_amount }}</div>
          </td>
          <td
            v-if="(task_type == '_surebets_hand' || task_type == '_surebets_auto') && activetype == 'zuhe'"
            style="font-weight: bold"
            colspan="1"
          >
            <div v-if="index + 1 == list.length" class="abdiv" style="width: 70px" :style="getheight()">
              {{ getalltotalamount() }}
            </div>
          </td>
          
          <td>
            <div style="float: right; margin-right: 25px">
              <div :style="colorstyle(item2)">
                {{ item2.win_back }}
              </div>
            </div>
          </td>
          <td>
            <div style="float: right; margin-right: 25px">
              <div :style="colorstyle(item2)">
                {{ item2.total_win_back }}
              </div>
            </div>
          </td>
          <td>
            <div
              v-if="(task_type == '_surebets_hand' || task_type == '_surebets_auto') && activetype == 'zuhe'"
              :style="getprofitStatus2() == '盈' ? 'color: #02a66e;' : (getprofitStatus2() == '亏' ? 'color: #f83e3e' : 'color: orange;')"
            >
              <div
                v-if="index + 1 == list.length"
                class="abdiv"
                style="width: 70px; margin-left: -8px"
                :style="getheight()"
              >
                {{ getprofitStatus2() }}
              </div>
            </div>
            <!-- <div
              v-if="(task_type == '_surebets_hand' || task_type == '_surebets_auto') && activetype == 'zuhe'"
              :style="getprofitStatus2() == '盈' ? 'color: #02a66e;' : 'color: #f83e3e'"
            >
              <div
                v-if="index + 1 == list.length"
                class="abdiv"
                style="width: 70px; margin-left: -8px"
                :style="getheight()"
              >
                {{ getprofitStatus2() }}
              </div>
            </div> -->
            <div
              v-else
              :style="getprofitStatus2() == '盈' ? 'color: #02a66e;' : (getprofitStatus2() == '亏' ? 'color: #f83e3e' : 'color: orange;')"
            >
              {{ getprofitStatus(item2.is_win) }}
            </div>
          </td>
          <td
            v-if="(task_type == '_surebets_hand' || task_type == '_surebets_auto') && activetype == 'zuhe'"
            colspan="1"
          >
            <div
              v-if="index + 1 == list.length"
              style="width: 60px; margin-left: -10px"
              class="abdiv"
              :style="getheight()"
            >
              {{ (profit_rate * 100).toFixed(0) }}%
            </div>
          </td>
          <td>
            <div v-if="item2.is_settlement == null || item2.is_settlement == 0">未标记</div>
            <div v-if="item2.is_settlement == 1">未交收</div>
            <div v-if="item2.is_settlement == 2">已交收</div>
          </td>
          <td>
            <div style="display: flex; align-items: center">
              <div
                style="width: 6px; height: 6px; border-radius: 50%"
                :style="item2.check_status == 0 ? 'background-color: #778090;' : 'background-color: #47acff;'"
              ></div>
              <div
                style="margin-left: 8px"
                :style="item2.check_status == 0 ? 'color: #778090;' : 'color: #47acff;'"
              >
                {{ item2.check_status == 0 ? '未结算' : '已结算' }}
              </div>
            </div>
          </td>
          <td>
            <div style="display: flex;align-items: center;">
              <el-tooltip
                class="box-item"
                :class="{ 'tooltip-hidden': !isOverflow(elRefs[`cell-${index}-${index2}`]) }"
                effect="dark"
                :content="item2.bet_id"
                placement="top"
              >
                <div
                  style="width: 110px; overflow: hidden; text-overflow: ellipsis"
                  :ref="elRefs[`${index}-${index2}`]"
                >
                  {{ item2.bet_id }}
                </div>
              </el-tooltip>
              <div style="cursor: pointer;" @click="OpenImgdialog(item2)">
                <img style="width: 20px;height: 20px;" :src="photo" alt="">
              </div>
            </div>
          </td>
          <td>
            <div>
              <el-tooltip class="box-item" effect="dark" :content="item2.user_name" placement="top">
                <div style="width: 110px; overflow: hidden; text-overflow: ellipsis; display: flex">
                  <div>
                    <img
                      v-if="item2.place_status == 2"
                      style="width: 8px; height: 8px"
                      src="@/assets/home/icon_right_green.png"
                    />
                    <img v-else style="width: 8px; height: 8px" src="@/assets/home/icon_wrong_red.png" />
                  </div>
                  <div style="margin-left: 8px">{{ item2.user_name }}</div>
                </div>
              </el-tooltip>
            </div>
          </td>
          <td v-if="task_type == '_copy_order_auto'">{{ item2.member }}</td>
          <td>
            <div style="">
              <div>
                {{ item2.uid }}
              </div>
            </div>
          </td>
          <td style="color: var(--pcmain-color) !important;cursor: pointer;" @click="clicksign(item2)">标记</td>
        </tr>
      </tbody>
    </table>

    
  </div>
  
</template>
<script setup>
import { inject, onMounted } from 'vue'
import photo from '@/assets/order/photo.png'


const tableDown = ref(null)
const elRefs = ref({})
const emits = defineEmits(['change'])
const tableheight = ref(100)
const props = defineProps({
  list: Array,
  task_type: String,
  profit_rate: Number,
  is_win: Number
})

const activetype = inject('activetype')

const getprofitStatus = (is_win) => {
  if (is_win == 3) {
    return '走'
  } else if (is_win == 2) {
    return '盈'
  } else if (is_win == 1) {
    return '亏'
  } else {
    return '-'
  }
}
const getprofitStatus2 = () => {
  if (props.is_win == 3) {
    return '走'
  } else if (props.is_win == 2) {
    return '盈'
  } else if (props.is_win == 1) {
    return '亏'
  } else {
    return '-'
  }
}

const getheight = () => {
  console.log(tableheight.value)

  return `height: ${tableheight.value - 48}px`
}

const colorstyle = (item2) => {
  let a = ''
  if (item2.win_back == 0 && item2.total_win_back == 0) {
    a = 'color: orange;'
  }
  if (item2.win_back > 0 && item2.total_win_back > 0) {
    a = 'color: #02a66e;'
  }
  if (item2.win_back < 0 && item2.total_win_back < 0) {
    a = 'color: #f83e3e;'
  }
  return a
}

const stylepadding = (list, item, index, index2) => {
  let str = ''
  if (list.length > 1 && index2 + 1 == item.order_list.length && index + 1 != list.length) {
    str += 'padding_td'
  }
  if (list.length > 1 && index2 + 1 == item.order_list.length && index != 0) {
    str += ' paddingtop_td'
  }
  return str
}

const getalltotalamount = () => {
  let num = 0
  props.list.forEach(item => {
    item.order_list.forEach(item2 => {
      if (item2.total_amount != null && item2.total_amount != undefined) {
        num += item2.total_amount
      }
    })
  })
  num = num.toFixed(2)
  return num
}

const isOverflow = element => {
  console.log(elRefs)

  // if (element) {
  //   return element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
  // }
  // return false;
}

const clicksign = (data) => {
  emits('change',{
    type: 'opensign',
    data: data
  })
}
const OpenImgdialog = (data) => {
emits('change',{
    type: 'openimg',
    data: data
  })
}

onMounted(() => {
  if (tableDown.value) {
    // 获取 div 的高度
    const height = tableDown.value.clientHeight
    console.log(tableheight.value)

    tableheight.value = height
  }

  Object.values(elRefs.value).forEach(el => {
    el.__el__ = el
  })
})
</script>
<style lang="scss" scoped>
.task-order {
  background-color: #fff;
  padding: 8px;
  border-radius: 8px;
}
table {
  width: 100%;
  //   text-align: center;
  font-size: 14px;
}

th {
  font-weight: inherit;
  line-height: 28px;
  color: #778090;
}

td {
  line-height: 28px;
  color: #252a30;
}

.status {
  color: #f1b31d;
}

.platform {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    margin-right: 8px;
    width: 16px;
    height: 16px;
  }
}

.padding_td td {
  padding-bottom: 8px;
}
.paddingtop_td td {
  padding-top: 0px;
}
.order_downindex {
  position: absolute;
  z-index: 9999;
  left: -15px;
  width: 16px;
  height: 16px;
  border-radius: 0 8px 8px 0;
  background-color: #778090;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.abdiv {
  position: absolute;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  z-index: 99;
}

.tooltip-hidden {
  display: none; /* 初始状态下不显示 tooltip */
}
</style>

<style>
.padding_td td::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px; /* 这里是设置下边框的高度 */
  background-color: #ebebeb; /* 这里是设置下边框的颜色 */
  z-index: 1; /* 确保下边框在表格上方 */
}
</style>
